<template>
  <Header></Header>
  <Drawer></Drawer>
  <el-breadcrumb separator="/" style="font-size: 20px; color: #2ab28b">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{
      labName
    }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/AdultList/' + ids }"
      >档案管理</el-breadcrumb-item
    >
  </el-breadcrumb>

  <div class="pageListBotton">
    <el-button
      :icon="Edit"
      style="color: white; background: #2196f3"
      round
      @click="onPageAdd"
    >
      新建档案
    </el-button>

    <span class="onBtnRight" @click="onHome"
      ><img src="../assets/img/pageList_qiehuan.png" alt="" /> 更换群体</span
    >
  </div>

  <div class="pageListBotton">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <!-- <el-form-item label="出生日期">
        <el-config-provider :locale="zhCn">
          <el-date-picker
              v-model="birthday"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="选择日期" :style="{'width':'100%'}">
          </el-date-picker>
        </el-config-provider>
      </el-form-item> -->
      <el-form-item>
        <el-button
          :icon="Search"
          color="#2196f3"
          style="color: white"
          round
          @click="search()"
          >搜索</el-button
        >
        <el-button Plain @click="resetting()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-table
    :data="tableData"
    style="width: 85%; margin-left: 5%"
    v-infinite-scroll="load"
    infinite-scroll-disabled="loading"
  >
    <div class="loading" v-if="loading">
      <span id="load-text">{{ loadText }}</span>
    </div>
    <el-table-column prop="id" label="序号" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="sex" label="性别">
      <template #default="scope">
        <span v-if="scope.row.sex == 2">男</span>
        <span v-if="scope.row.sex == 1">女</span>
      </template>
    </el-table-column>
    <el-table-column prop="height" label="身高" />
    <el-table-column prop="weight" label="体重" />
    <el-table-column prop="birthday" label="出生日期" />
    <!-- <el-table-column prop="guardian_name" label="监护人姓名" /> -->
    <el-table-column prop="mobile" label="手机号" />
    <el-table-column prop="nation" label="民族" />
    <el-table-column prop="numbers" label="测评次数">
      <template #default="scope">
        <span>{{ scope.row.numbers }}次</span>
      </template>
    </el-table-column>

    <!-- <el-table-column prop="createtime" label="创建时间" width="200"/> -->
    <el-table-column fixed="right" label="操作档案">
      <template #default="scope">
        <el-button type="text" size="small" @click="handleClick(scope.row.id)"
          >编辑</el-button
        >
        <el-button type="text" size="small" @click="onEvaluation(scope.row.id)"
          >测评</el-button
        >
        <el-button type="text" size="small" @click="onGetReport(scope.row.id)"
          >报告</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogTableVisible" title="查看报告" width="60%">
    <el-table :data="gridData" @row-click="onLookReport">
      <el-table-column
        property="name"
        label="姓名"
        width="100"
      ></el-table-column>
      <el-table-column property="age" label="年龄" width="50"></el-table-column>
      <el-table-column
        property="mobile"
        label="手机号"
        width="150"
      ></el-table-column>
      <el-table-column
        property="birthday"
        label="生日"
        width="150"
      ></el-table-column>
      <el-table-column
        property="report"
        label="报告"
        width="200"
      ></el-table-column>
      <el-table-column property="id" label="操作">
        <el-button type="primary" style="width: 100px"
          >查看报告</el-button
        ></el-table-column
      >
    </el-table>
  </el-dialog>

  <!--    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">-->
  <!--      <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>-->
  <!--    </ul>-->
</template>

<script>
import { Edit, CirclePlus, Search, Expand } from "@element-plus/icons-vue";
import Header from "./common/Header.vue";
import { ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import Drawer from "./common/Drawer.vue";

export default {
  name: "pageList",
  components: {
    Header,
    Drawer,
  },

  data() {
    return {
      labelPosition: "top",
      labName: "",
      ids: "",
      birthday: "",
      zhCn,
      name: "",
      mobile:'',
      guardian: "",
      birth: [],
      establish: [],
      pages: 0,
      totalPages: "",
      limit: 20,
      loading: false,
      loadText: "正在加载...",
      tableData: [],
    };
  },
  created() {
    this.onDefault(this.pages);
  },
  mounted() {
    // 监听页面滚动事件
    window.addEventListener("scroll", this.scrolling,true)
  },
  methods: {
    //重置
    async resetting() {
      let params = {
        'group_id': this.ids,
        'pages': 1,
        'limit': this.limit,
      }
      let data = await api.AdultList(params)
      this.tableData = data.data.data.contents;
      this.name = '';
      this.mobile = '';
    },
     //搜索
     async search() {
      let params = {
        'group_id': this.ids,
        'pages': '',
        'limit': this.limit,
        'name': this.name,
        'mobile': this.mobile
      }
      let data = await api.AdultList(params)
      this.tableData = data.data.data.contents;
    },
    scrolling(){
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          let clientHeight = document.documentElement.clientHeight;
          let scrollHeight = document.documentElement.scrollHeight;//内容高度
          if(scrollTop+clientHeight==scrollHeight){
            this.onDefault(this.pages);
          }

    },
    load() {
      // //滑到底部时进行加载
      // this.loading = true;
      // this.pages += 20; //页数+10
      // this.onDefault(0, 1); //调用接口，此时页数+1，查询下一页数据
    },
    async onDefault(pages) {
      this.pages=pages+1;
      if (this.$route.params.groupId) {
        this.ids = this.$route.params.groupId;
        if (this.ids == 3) {
          this.labName = "婴幼儿营养测评";
        } else if (this.ids == 5) {
          this.labName = "孕产妇营养测评";
        } else if (this.ids == 6) {
          this.labName = "成年人营养测评";
        } else if (this.ids == 7) {
          this.labName = "慢性病营养测评";
        } else if (this.ids == 8) {
          this.labName = "团体营养测评";
        }
        console.log(this.pages)
      if(this.pages==1){
        let params = {
          'group_id': this.ids,
          'pages': this.pages,
          'limit': this.limit,
        }
        let data = await api.AdultList(params)
        console.log(data.data.data.contents,'数据1')
        this.tableData = data.data.data.contents;
      }else{
          let params1 = {
          'group_id': this.ids,
          'pages': this.pages,
          'limit': this.limit,
        }
          let data = await api.archives(params1)
          this.tableData=[...this.tableData,...data.data.data.contents]
      }
      }
    },
    onHome() {
      this.$router.push({ path: "/Home/" });
    },
    onPageAdd() {
      this.$router.push({ path: "/AdultAdd/" + this.ids });
    },
    handleClick(ids) {
      this.$router.push({ path: "/AdultEdit/" + this.ids + "/" + ids });
    },
    onEvaluation(ids) {
      this.$router.push({ path: "/AdultEvaluation/" + this.ids + "/" + ids });
    },
    onCompanyList(ids) {
      this.$router.push({ path: "/CompanyList/" + this.ids });
    },

    formInline() {},
  },
};
</script>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import http from "../utils/http";
import * as api from "../api/loginHttp";
const dialogTableVisible = ref(false);
const formLabelWidth = "120px";
const gridData = ref([]);
const route = useRoute();
const router = useRouter();

const onGetReport = async (id) => {
  // console.log(id)
  http.get("api/adult/generatelist?id=" + id + "&type=analysis").then((res) => {
    if (res.data.code === 0) {
      ElMessage.error(res.data.msg);
    } else {
      gridData.value = res.data.data.archivesReport;
      dialogTableVisible.value = true;
    }
  });
  // await router.push({'path': '/Home'})
};
const onLookReport = async (row) => {
  const { href } = await router.resolve({
    path: "/Adult_report/" + row.group_id + "/" + row.member_id + "/" + row.id,
  });
  window.open(href, "_blank");
};
</script>

<style scoped>
@import "../assets/css/common.css";

/deep/.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  /*font-weight: 700;*/
  color: #2ab28b;
  text-decoration: none;
  transition: var(--el-transition-color);
  color: var(--el-text-color-primary);
}
</style>
<style>
.pageListBotton {
  margin-top: 40px;
  margin-left: 120px;
}

.pageListBotton .el-button--primary {
  background-color: #2ab28b;
  border: #2ab28b;
  width: 141px;
  height: 58px;
}

.pageListBotton .el-button--success {
  background-color: #2ab28b;
  border: #2ab28b;
  color: #fff;
}

.onBtnRight {
  cursor: pointer;
  width: 20%;
  font-size: 18px;
  float: right;
  color: #2ab28b;
}
.onBtnRight img {
  width: 14px;
  padding-right: 10px;
}
.onBtnRight:hover {
  color: #409eff;
}
.page_provider_title {
  float: left;
  font-size: 14px;
  padding-right: 10px;
}
.xinjian {
  position: relative;
}
.xinjian img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: 20px;
}
.cell .el-button {
  width: 32px;
}
</style>
